<template>
  <div class="top-bar">
    <!-- 面包屑导航 -->
<!--    <div class="breadcrumb-container">-->
<!--      <breadcrumbs v-if="$route.meta.title"></breadcrumbs>-->
<!--    </div>-->

<!--    <el-page-header @back="goBack" content="">-->
<!--    </el-page-header>-->

<!--    面包屑-->
    <el-breadcrumb style="font-size: 18px;">
      <el-breadcrumb-item
          v-for="(item, index) in levelList"
          :key="index"
          :to="null">{{ item.meta.title }}</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 顶栏菜单 -->
    <el-menu :default-active="activeIndex" class="menu-container" mode="horizontal" @select="handleSelect">
      <el-submenu index="1">
        <template slot="title">个人中心</template>
<!--        <el-menu-item index="2-1">修改信息</el-menu-item>-->
        <el-menu-item index="2-2" @click="loginout">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script >
  import Utils from '../store/util.js';
  import Breadcrumbs from '../components/Breadcrumbs.vue';

  export default {
    components: {
      Breadcrumbs
    },
    data() {
      return {
        activeIndex: '1'
      };
    },
    methods:{
      // goBack() {
      //   console.log('go back');
      // },
      loginout(){
        Utils.$emit('loginout','msg');
      },
      handleSelect(key, keyPath) {
        console.log('select', key, keyPath);
      }
    },
    computed: {
      // 面包屑动态获取
      levelList() {
        let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
        const first = matched[0];
        matched = first ? matched : [{ path: '/', meta: { title: '首页' } }];
        return matched.map(item => {
          let to = { name: item.name, query: this.$route.query };
          if (item.path === this.$route.path) {
            to = { path: item.path };
          }
          return { to, meta: item.meta };
        });
      }
    }
  }
</script>

<style scoped>
.el-breadcrumb__inner {
  font-size: 20px; /* 你希望设置的字体大小 */
}

.el-breadcrumb__separator {
  font-weight: bold;
}
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px; /* 根据需要调整内边距 */
}

.menu-container {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}
</style>
